<!-- 用户资料页 -->
<template>
	<view>
	<view class="uni-content">
		<uni-forms :modelValue="form" :rules="rules" ref="formRef" label-width="140rpx" label-align="right">
		<view class="avatar">
			<uni-forms-item label="头像" name="avatar">
				<uni-file-picker limit="1" :image-styles="imageStyles" :del-icon="false" :disable-preview="true"
					fileMediatype="image" v-model="avatar" @select="handleAvatarUploadSuccess"></uni-file-picker>				</uni-forms-item>
		</view>
		</uni-forms>
		<uni-list style="margin-bottom: 20px;">
			<uni-list-item style="flex: 1;flex-direction: row;justify-content: space-between;align-items: center;margin-right: 20px;" title="用户名" :rightText="user.username||'用户'+user.id" >
			</uni-list-item>
			<uni-list-item class="item" @click="bindMobile" title="手机号" :rightText="user.mobile||'未绑定'" link>
			</uni-list-item>
			<uni-list-item  class="item" @click="changePassword" title="修改密码" link>
			</uni-list-item>
			
		</uni-list>
		</view>
		
			<view class="box">
			<uni-forms :modelValue="form" :rules="rules" ref="formRef" >
				<uni-section title="年龄" type="line" >
					 <uni-forms-item name="age"  >
					 	<uni-easyinput  type="text" v-model="form.age" placeholder="年龄" />
					 	</uni-forms-item>
						</uni-section>
						<uni-section title="性别" type="line">
					<uni-forms-item name="sex" >
						<uni-data-checkbox style="position: relative; top: 10rpx;" v-model="form.sex" :localdata="range"></uni-data-checkbox>
						</uni-forms-item> 
						  </uni-section>
						  <uni-section title="地址" type="line">
				       <uni-forms-item  name="address">
				          <uni-easyinput type="textarea" v-model="form.address" placeholder="地址" />
				       </uni-forms-item>
					    </uni-section>
				       <uni-forms-item >
				       		<button type="primary"  @click="save" >保 存</button>
				       			</uni-forms-item>
				       			</uni-forms>
						</view>		
		
		</view>
</template>
<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('weather2024'),
				form:{},
				range: [
					  					{ text: '男', value: '男' },
					  					{ text: '女', value: '女' },
					  				],
				imageStyles: {
					  			"height": 90, // 边框高度
					  			"width": 90, // 边框宽度
					  			"border": { // 如果为 Boolean 值，可以控制边框显示与否
					  						"color": "#000", // 边框颜色
					  						"width": "1px", // 边框宽度
					  						"style": "solid", // 边框样式
					  						"radius": "50%" // 边框圆角，支持百分比
					  					}
					  				},
				avatar:[],
				showLoginManage: false ,//通过页面传参隐藏登录&退出登录按钮
			}
		},
		  onLoad() {
		  		this.form = JSON.parse(JSON.stringify(this.user))
		  		this.avatar = [{
		  			url: this.user.avatar
		  		}]
		  	},
		methods: {
		    logout() {
		         uni.removeStorageSync('weather2024')
		         uni.redirectTo({
			         url:'/pages/login/login',
		      })
		     },
			changePassword() {
				uni.navigateTo({
					url:'/pages/user/password',
				})
			},
			setUsername() {
				uni.navigateTo({
					url: '/pages/user/username'
				})
			},
		bindMobile() {
			uni.navigateTo({
				url: '/pages/user/bindMobile'
			})
		},
		 save() {
			        // 保存当前的用户信息到数据
			      this.$request.put('/user/update', this.form).then(res => {
					 
			      					if (res.code === '200') {
			      						uni.showToast({
			      							icon: "success",
			      							title: '操作成功'
			      						})
			      					uni.setStorageSync('weather2024', this.form)  // 更新浏览器缓存的用户信息	
			      					} else {
			      						uni.showToast({
			      							icon: "error",
			      							title: res.msg
			      						})
			      					}
			      				})
			      },
		handleAvatarUploadSuccess(e) {
			 				let _this = this
			 				const filePath = e.tempFilePaths[0]
			 				uni.uploadFile({
								
			 					url: _this.$baseUrl + '/file/upload', //自己的后端接口（默认发送post请求）
			 					filePath: filePath,
			 					name: "file", //这里应为自己后端文件形参的名字
								header:{
									token: uni.getStorageSync('weather2024').token
								},
			 					success(res) {
			 						console.log(res)
			 						let url = JSON.parse(res.data || '{}').data
			 						_this.form.avatar = url
			 					}
			 				})
			 			},
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	.uni-content {
		padding: 0;
	}

	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	@media screen and (min-width: 690px) {
		.uni-content {
			padding: 0;
			max-width: 690px;
			margin-left: calc(50% - 345px);
			border: none;
			max-height: none;
			border-radius: 0;
			box-shadow: none;
		}
	}
.item {
		flex: 1;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}


	/* #endif */
	.avatar {
		
		justify-content: center;
		margin-top:10px;
		margin-left: 60px;
		width: 100%;
	}

	
	.button {
			display: flex;
			align-items: center;
			height: 35px;
			margin-left: 10px;
		}
	
</style>
